<template>
	<div class="login-wrap">
		<div class="meng">
			<div class="login-head">
				<span>智能物业系统TI端</span>
			</div>
			<div class="ms-login">
				<div class="ms-title">欢迎登录</div>
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="ms-content">
					<el-form-item prop="email">
						<el-input class="input-st" size="medium" v-model="ruleForm.email" placeholder="email">
							<span slot="prepend" class="icon">邮箱</span>
						</el-input>
					</el-form-item>
					<el-form-item prop="password">
						<el-input class="input-st" size="medium" type="password" placeholder="password" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')">
							<span slot="prepend" class="icon">密码</span>
						</el-input>
					</el-form-item>
					<div class="login-btn">
						<el-button type="success" @click="submitForm('ruleForm')">登录</el-button>
					</div>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data: function() {
			return {
				ruleForm: {
					email: '',
					password: ''
				},
				rules: {
					email: [{
						required: true,
						message: '请输入邮箱',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						window.localStorage.email = this.ruleForm.email;
						this.confimSubmit();
					} else {
						this.$message.error('请确定填写是否无误！');
						return false;
					}
				});
			},
			confimSubmit(){
				if(this.ruleForm.email==='yuanjia101' || this.ruleForm.password==='yuanjia101'){
					localStorage.setItem('oneoneone', '111');
					this.$router.push({path: '/'});
				}else{
					this.$message.error('账号或密码错误')
				}
			}
		},
		created(){
			this.ruleForm.email = window.localStorage.email || '';
		}
	}
</script>

<style>
	.login-wrap {
		position: relative;
		width: 100%;
		height: 100%;
		background-image: url(../../assets/img/login-bg.png);
		background-size: 100%;
	}
	.meng{
		width: 100%;
		height: 100%;
		background-color: rgba(1, 22, 81, 0.4);
	}

	.login-wrap .ms-title {
		width: 100%;
		line-height: 60px;
		text-align: center;
		font-size: 20px;
		color: #fff;
		background-color: #67c23a;
	}

	.ms-login {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 350px;
		margin: -150px 0 0 -175px;
		border-radius: 8px;
		background: #fff;
		overflow: hidden;
	}
	
	.login-wrap .login-head{
		position: absolute;
		top: 30px;
		left: 30px;
		line-height: 35px;
		font-size: 25px;
		color: #fff;
	}
	.login-wrap .logo-img{
		float: left;
		height: 35px;
	}
	.login-wrap .login-head span{
		float: left;
		border-left: 1px solid #fff;
		padding: 0 20px;
		margin-left: 20px;
	}
	
	.login-wrap .el-input__inner{
		border-left-width: 0;
	}
	.login-wrap .el-input-group__prepend{
		padding: 0 0px 0 16px;
		color: #aaa;
		height: 34px;
	}
	.login-wrap .el-input__inner,.el-input-group__prepend{
		background-color: #fbfbfb;
	}
	
	.login-wrap .is-success .el-input-group__prepend{
		border-color: #67c23a;
	}
	.login-wrap .is-error .el-input-group__prepend{
		border-color: #f56c6c;
	}
	.login-wrap .ms-content {
		padding: 30px 30px;
	}

	.login-wrap .login-btn {
		text-align: center;
		margin-bottom: 10px;
	}

	.login-wrap .login-btn button {
		width: 100%;
		height: 36px;
		color: #fff;
		border: 1px solid #fff;
	}
	
	.login-wrap .el-input__inner:focus{
		border-color: #DCDFE6!important;
	}
</style>
